<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/head.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿京东商城商品分类菜单</title>
<script type="text/javascript" src="<%=basePath%>/js/CJL.0.1.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/js/RelativePosition.js"></script>
<script type="text/javascript" src="<%=basePath%>/js/FixedMenu.js"></script>
<script type="text/javascript" src="<%=basePath%>/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/js/json2.min.js"></script>
<script type="text/javascript">
var menu2 = "";
</script>
</head>
<body>
仿京东商城商品分类菜单： <br>
<br>
<style type="text/css">
.container2, .container2 dd, .container2_2 dl, .container2_2 dd {margin:0;}
.container2 {font-size:14px;width:190px;border:1px solid #cf2020;background:#fffff5;padding:5px 8px; line-height:30px; color:#333;}
.container2 dt {font-weight:bold;color:#cf2020;}
.container2 dd {background:url(<%=basePath%>/images/bg.jpg) 180px 10px no-repeat;_zoom:1;}
.container2_2 {background-color:#bebec3; display:none;}
.container2_2 dl {font-size:14px;width:200px;border:1px solid #969696;background:#fff; position:relative; left:-3px; top:-3px; }
.container2_2 dd div {padding:5px 20px; background:url(bg.jpg) 6px 7px no-repeat;_zoom:1;}
.container2_2 dt, .shadow {padding:0 5px; position:absolute;background:#fff; border:1px solid #969696; border-right:0;width:169px;left:-180px; top:-1px;height:24px;line-height:24px;}
.shadow {background-color:#bebec3;border-color:#bebec3; top:0;}
.container2_2 a{display:block;_zoom:1;}
.container2_2 a:link, .container2_2 a:visited, .container2_2 a:active {color:#333;text-decoration: none;}
.container2_2 a:hover {color:#ff6026;text-decoration: underline;}
</style>
<dl id="idContainer2" class="container2">
<dt>所有分类</dt>
	<s:iterator value="list" id="type" status="statl">
		<dt id="<s:property value="id"/>"><s:property value="name" /></dt>
		<s:iterator value="map.get(id)" status="statm">
				<dd id="<s:property value="id"/>"><s:property value="name" /></dd>
		</s:iterator>
	</s:iterator>
<!-- 
	<dt id="idMenu2_1">图片动画</dt>
	<dd id="idMenu2_2">图片效果</dd>
	<dd id="idMenu2_3">动画效果</dd>
	<dt id="idMenu2_51">系统其他</dt>
	<dd id="idMenu2_52">系统效果</dd>
	<dd id="idMenu2_53">其他效果</dd>
	 -->
</dl>
<div id="idContainer2_2" class="container2_2">
	<div class="shadow"></div>
	<dl>
		<dt id="idTitle"></dt>
		<dd id="idMenu2">
			<s:iterator value="list3" status="stat3">
				<div id="<s:property value="id"/>"><a href="#"><s:property value="value"/></a></div>
				<script>
				menu2 += "{ \"id\": \"<s:property value="id"/>\", \"parent\":\"<s:property value="parentid"/>\", \"elem\": \"<s:property value="id"/>\" },"
				</script>
			</s:iterator>
			<!-- 
			<div id="idMenu2_11"><a href="http://www.cnblogs.com/cloudgamer/archive/2008/07/06/SlideTrans.html">图片滑动切换效果</a></div>
			<div id="idMenu2_12"><a href="http://www.cnblogs.com/cloudgamer/archive/2008/05/23/1205642.html">图片变换效果(ie only)</a></div>
			<div id="idMenu2_13"><a href="http://www.cnblogs.com/cloudgamer/archive/2008/05/13/1194272.html">图片滑动展示效果</a></div>
			<div id="idMenu2_14"><a href="http://www.cnblogs.com/cloudgamer/archive/2008/07/21/ImgCropper.html">图片切割效果</a></div>
			<div id="idMenu2_21"><a href="http://www.cnblogs.com/cloudgamer/archive/2009/01/06/Tween.html">Tween算法及缓动效果</a></div>
			<div id="idMenu2_22"><a href="http://www.cnblogs.com/cloudgamer/archive/2008/08/27/1277131.html">渐变效果</a></div>
			<div id="idMenu2_61"><a href="http://www.cnblogs.com/cloudgamer/archive/2008/10/20/1314766.html">无刷新多文件上传系统</a></div>
			<div id="idMenu2_62"><a href="http://www.cnblogs.com/cloudgamer/archive/2008/10/05/ImgCropper_sys.html">图片切割系统</a></div>
			<div id="idMenu2_71"><a href="http://www.cnblogs.com/cloudgamer/archive/2008/11/17/Drag.html">拖放效果</a></div>
			<div id="idMenu2_72"><a href="http://www.cnblogs.com/cloudgamer/archive/2008/12/03/Resize.html">拖拉缩放效果</a></div>
			<div id="idMenu2_73"><a href="http://www.cnblogs.com/cloudgamer/archive/2008/12/24/Slider.html">滑动条效果</a></div>
			 -->
		</dd>
	</dl>
</div>
<script>
/*
var menu2 = [
	{ id: 1, parent: 0, elem: 'idMenu2_1' },
	
	{ id: 2, parent: 0, elem: 'idMenu2_2' },
	{ id: 3, parent: 0, elem: 'idMenu2_3' },
	
	{ id: 11, parent: 2, elem: 'idMenu2_11' },
	{ id: 12, parent: 2, elem: 'idMenu2_12' },
	{ id: 13, parent: 2, elem: 'idMenu2_13' },
	{ id: 14, parent: 2, elem: 'idMenu2_14' },
	
	{ id: 21, parent: 3, elem: 'idMenu2_21' },
	{ id: 22, parent: 3, elem: 'idMenu2_22' },
	
	{ id: 51, parent: 0, elem: 'idMenu2_51' },
	
	{ id: 52, parent: 0, elem: 'idMenu2_52' },
	{ id: 53, parent: 0, elem: 'idMenu2_53' },
	
	{ id: 61, parent: 52, elem: 'idMenu2_61' },
	{ id: 62, parent: 52, elem: 'idMenu2_62' },
	
	{ id: 71, parent: 53, elem: 'idMenu2_71' },
	{ id: 72, parent: 53, elem: 'idMenu2_72' },
	{ id: 73, parent: 53, elem: 'idMenu2_73' }
];
*/
alert("menu2== "+menu2);
if(menu2.lastIndexOf(",") != -1){
	menu2 = menu2.substring(0,menu2.lastIndexOf(","));
}
alert("menu2= 2= "+menu2);
menu2 = "["+menu2+"]";
menu2 = JSON.parse(menu2);
var container2 = [ "idContainer2", { id: "idContainer2_2", menu: "idMenu2" } ];

new FixedMenu(container2, { menu: menu2,
	relative: { align: "clientleft", vAlign: "clienttop", customTop: 5, customLeft: 176 },
	onBeforeShow: function(container, menu){ $$("idTitle").innerHTML = menu._elem.innerHTML; }
});

</script>
</body>
</html>
